<template>
  <div class="user-center-page">
    <!-- 用户信息头部 -->
    <div class="user-header">
      <div class="header-background"></div>
      <div class="user-info">
        <div class="avatar-container" @click="showImagePreview([userStore.userInfo?.avatarUrl || defaultAvatarUrl])">
          <van-image
            round
            width="80px"
            height="80px"
            :src="userStore.userInfo?.avatarUrl || defaultAvatarUrl"
            class="user-avatar"
          >
            <template v-slot:error>
              <van-icon name="user-o" size="40" color="#ccc" />
            </template>
          </van-image>
          <div class="avatar-badge">
            <van-icon name="photograph" size="16" color="white" />
          </div>
        </div>
        <div class="user-details">
          <h2 class="username">{{ userStore.userInfo?.nickname || "用户" }}</h2>
          <p class="user-desc">欢迎使用尚庭公寓</p>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <div class="section-title">
        <h3>我的服务</h3>
        <van-icon name="apps-o" size="20" color="#666" />
      </div>
      <div class="menu-grid">
        <div
          v-for="item in navList"
          :key="item.path"
          class="menu-item"
          @click="router.push(item.path)"
        >
          <div class="menu-icon">
            <SvgIcon :name="item.icon" size="28" />
          </div>
          <span class="menu-text">{{ item.name }}</span>
          <van-icon name="arrow" size="14" color="#ccc" />
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="section-title">
        <h3>数据统计</h3>
        <van-icon name="chart-trending-o" size="20" color="#666" />
      </div>
      <div class="stats-grid">
        <div class="stats-card">
          <div class="stats-number">{{ browsingCount }}</div>
          <div class="stats-label">浏览记录</div>
        </div>
        <div class="stats-card">
          <div class="stats-number">{{ appointmentCount }}</div>
          <div class="stats-label">预约次数</div>
        </div>
        <div class="stats-card">
          <div class="stats-number">{{ agreementCount }}</div>
          <div class="stats-label">租约数量</div>
        </div>
      </div>
    </div>

    <!-- 退出登录 -->
    <div class="logout-section">
      <van-button 
        type="danger" 
        class="logout-button"
        @click="logoutHandle"
        plain
        round
      >
        <van-icon name="sign-out" size="16" />
        <span class="ml-2">退出登录</span>
      </van-button>
    </div>
  </div>
</template>
<script setup lang="ts" name="UserCenter">
import { useUserStore } from "@/store/modules/user";
import { showImagePreview } from "vant";
import defaultAvatarUrl from "../../../public/logo.png";
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
console.log("router.currentRoute.value.path", router);
const navList = ref([
  {
    icon: "历史",
    name: "浏览历史",
    path: "/browsingHistory"
  },
  {
    icon: "预约",
    name: "我的预约",
    path: "/myAppointment"
  },
  {
    icon: "合同",
    name: "我的租约",
    path: "/myAgreement"
  }
]);
const userStore = useUserStore();

// 统计数据
const browsingCount = ref(0);
const appointmentCount = ref(0);
const agreementCount = ref(0);

// 获取统计数据
const getStatistics = async () => {
  try {
    // 这里可以调用相应的API获取真实数据
    // 暂时使用模拟数据
    browsingCount.value = Math.floor(Math.random() * 50) + 1;
    appointmentCount.value = Math.floor(Math.random() * 20) + 1;
    agreementCount.value = Math.floor(Math.random() * 10) + 1;
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

// 退出登陆
const logoutHandle = () => {
  userStore.Logout();
  // 清空路由浏览历史记录
  router.replace("/");
};
console.log(userStore);
onMounted(() => {
  userStore.GetInfoAction();
  getStatistics();
});
</script>

<style scoped lang="less">
.user-center-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-bottom: 20px;
}

// 用户信息头部
.user-header {
  position: relative;
  padding: 40px 20px 30px;
  margin-bottom: 20px;
  
  .header-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0 0 30px 30px;
  }
  
  .user-info {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    .avatar-container {
      position: relative;
      margin-right: 20px;
      cursor: pointer;
      
      .user-avatar {
        border: 4px solid white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
      
      .avatar-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
      }
    }
    
    .user-details {
      flex: 1;
      
      .username {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin: 0 0 4px 0;
      }
      
      .user-desc {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }
  }
}

// 通用区块样式
.menu-section,
.stats-section {
  margin: 0 16px 20px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  
  h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }
}

// 功能菜单
.menu-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #e9ecef;
    transform: translateX(4px);
  }
  
  &:active {
    transform: scale(0.98);
  }
  
  .menu-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    color: white;
  }
  
  .menu-text {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
}

// 统计信息
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stats-card {
  text-align: center;
  padding: 20px 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
  }
  
  .stats-number {
    font-size: 24px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 4px;
  }
  
  .stats-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
  }
}

// 退出登录
.logout-section {
  padding: 0 16px;
  margin-top: 40px;
  
  .logout-button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid #ff4757;
    color: #ff4757;
    
    &:hover {
      background: #ff4757;
      color: white;
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .user-header {
    padding: 30px 16px 20px;
    
    .user-info {
      padding: 16px;
      
      .avatar-container {
        margin-right: 16px;
      }
      
      .username {
        font-size: 18px;
      }
    }
  }
  
  .stats-grid {
    gap: 8px;
  }
  
  .stats-card {
    padding: 16px 8px;
    
    .stats-number {
      font-size: 20px;
    }
    
    .stats-label {
      font-size: 11px;
    }
  }
  
  .menu-item {
    padding: 12px;
    
    .menu-icon {
      width: 40px;
      height: 40px;
      margin-right: 12px;
    }
    
    .menu-text {
      font-size: 14px;
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-section,
.stats-section {
  animation: fadeInUp 0.6s ease-out;
}

.menu-item:nth-child(1) { animation-delay: 0.1s; }
.menu-item:nth-child(2) { animation-delay: 0.2s; }
.menu-item:nth-child(3) { animation-delay: 0.3s; }
</style>
